<template>
  <div>
    <el-container>
      <el-header style="margin-top:40px;">
        <el-steps :active="active" finish-status="success" align-center>
          <el-step title="选择商品分类"></el-step>
          <el-step title="填写商品信息"></el-step>
          <el-step title="填写商品属性"></el-step>
        </el-steps>
      </el-header>
      <el-main>
        <div class="addGoods-div-01">
          <div v-if="active == 1">
            <div class="module-row">
              <div class="module-row-left">
                <div class="classify-icon">
                  <i class="el-icon-collection-tag"></i> 选择分类
                </div>
              </div>
              <el-container>
                <el-main>
                  <div class="addGoods-mokuai">
                    <div
                      v-for="(cardOption, $index) in cardOptions"
                      :key="$index"
                      class="cascader-div clearfix"
                    >
                      <div v-if="$index != 0" class="cascader-div-left">
                        <img src="../../../assets/images/u2243.png" />
                      </div>
                      <el-card class="box-card">
                        <div slot="header">
                          <span>选择第{{ $index + 1 }}级分类</span>
                        </div>
                        <!-- 一. 自定义 -->
                        <!-- <div style="overflow-y: auto;overflow-x: hidden;height: 335px;"> -->
                        <!-- 二. 使用el-scrollbar组件 -->
                        <!-- <el-scrollbar wrap-class="list" wrap-style="color: red;" view-style="font-weight: bold;" view-class="view-box" :native="false"> -->
                        <div style="height:335px">
                          <el-scrollbar wrap-class="scrollbar-wrap">
                            <div
                              v-for="(category, index) in cardOption.option"
                              :key="category.categoryId"
                              :id="category.categoryId"
                              @click="handleCategorySelected($index, $event)"
                              :class="{
                                'card-item': true,
                                'card-item-border':
                                  index < 8 || index != card.option.length
                              }"
                            >
                              <a>
                                <div
                                  :class="
                                    cardOption.selected == category.categoryId
                                      ? 'active'
                                      : ''
                                  "
                                >
                                  <div class="a-div">
                                    {{ category.categoryName }}
                                  </div>
                                  <i class="el-icon-arrow-right"></i>
                                </div>
                              </a>
                            </div>
                          </el-scrollbar>
                        </div>
                      </el-card>
                    </div>
                  </div>
                </el-main>
              </el-container>
            </div>
          </div>
          <div v-if="active == 2">
            <div class="module-row">
              <div class="module-row-left">
                <div class="classify-icon">
                  <i class="el-icon-collection-tag"></i> 基本信息
                </div>
              </div>
              <el-container>
                <el-main>
                  <div class="addGoods-mokuai">
                    <el-form
                      ref="refForm"
                      :rules="form.spuRules"
                      :model="spu"
                      label-width="80px"
                    >
                      <el-form-item label="商品分类" prop="category">
                        <span
                          v-for="(item, index) in cardOptions"
                          :key="index"
                          style="color:#606266;"
                        >
                          {{ item.selected != null && index != 0 ? " > " : "" }}
                          {{ item.selected != null ? item.name : "" }}
                          <!-- {{item.selected != null ? item.option.forEach(i => item.selected == i.categoryId
                          ).categoryName : "" }}-->
                          <!-- {{item.selected != null ? item.option.forEach(i => {
                                if(item.selected == i.categoryId){
                                  return i.categoryName;
                                }
                          }) : "" }}-->
                        </span>
                        <div
                          @click="editCategory"
                          style="display:inline-block;color:#0099FF;margin-left:20px;cursor:pointer;"
                        >
                          <i class="el-icon-edit"></i>
                          <span style="font-family:'微软雅黑';font-weight:400;"
                            >编辑</span
                          >
                        </div>
                      </el-form-item>
                      <el-form-item label="商品名称" prop="name">
                        <el-input
                          v-model="spu.name"
                          class="addgoods-input-width"
                        ></el-input>
                      </el-form-item>
                      <el-form-item label="副标题" prop="subhead">
                        <el-input
                          v-model="spu.subhead"
                          class="addgoods-input-width"
                        ></el-input>
                      </el-form-item>
                      <el-form-item label="商品品牌" prop="brand">
                        <el-select
                          v-model="spu.brand"
                          class="addgoods-input-width"
                          placeholder="请选择商品品牌"
                        >
                          <el-option
                            v-for="item in brands"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id"
                          ></el-option>
                        </el-select>
                      </el-form-item>
                      <el-form-item label="商品介绍" prop="desc">
                        <el-input
                          type="textarea"
                          :rows="8"
                          v-model="spu.desc"
                          class="addgoods-input-width"
                        ></el-input>
                      </el-form-item>
                      <el-form-item label="运费模板" prop="freight">
                        <el-select
                          v-model="spu.freight"
                          class="addgoods-input-width"
                          placeholder="请选择运费模板"
                        >
                          <el-option
                            v-for="item in freights"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id"
                          ></el-option>
                        </el-select>
                      </el-form-item>
                      <el-form-item label="商品货号" prop="encode">
                        <el-input
                          v-model="spu.encode"
                          class="addgoods-input-width"
                          placeholder="如果您不输入商品货号，系统将自动生成一个唯一的货号。"
                        ></el-input>
                      </el-form-item>
                      <el-form-item label="服务保证">
                        <el-checkbox-group v-model="spu.serve">
                          <el-checkbox
                            label="无忧退货"
                            name="serve"
                          ></el-checkbox>
                          <el-checkbox
                            label="快速退款"
                            name="serve"
                          ></el-checkbox>
                          <el-checkbox
                            label="免费包邮"
                            name="serve"
                          ></el-checkbox>
                        </el-checkbox-group>
                      </el-form-item>
                    </el-form>
                  </div>
                </el-main>
              </el-container>
            </div>
          </div>
          <div v-if="active == 3">
            <el-form
              :inline="true"
              :rules="form.skuRules"
              :model="form"
              class="demo-form-inline"
            >
              <!-- 商品属性 -->
              <div class="module-row">
                <div class="module-row-left">
                  <div class="classify-icon">
                    <i class="el-icon-collection-tag"></i> 商品属性
                  </div>
                </div>
                <el-container>
                  <el-main>
                    <div class="addGoods-mokuai">
                      <div class="module">
                        <el-form-item label="规格参数组:">
                          <el-input
                            v-model="temp.name"
                            :disabled="true"
                          ></el-input>
                        </el-form-item>
                      </div>
                      <!-- 商品规格 -->
                      <div class="module-background">
                        <el-form-item
                          prop="goodsSpec"
                          label="商品规格："
                          style="display:block;"
                        ></el-form-item>
                        <el-form-item
                          v-for="(item, index) in temp.spec"
                          :key="index"
                          :label="item.name + '：'"
                          style="display:block;margin-left:15px;"
                        >
                          <!-- v-model="item.checked" -->
                          <el-checkbox-group
                            v-model="temp.spec[index].option"
                            @change="handleCheckedCitiesChange"
                          >
                            <el-checkbox
                              v-for="($item, $index) in item.options"
                              :label="$item"
                              :key="$index"
                            >
                              {{ $item }}
                              <el-button
                                v-if="item.name.indexOf('颜色') != -1"
                                type="text"
                                style="font-family:'微软雅黑';font-weight:400;color:#0099FF;"
                                @click="deleteColor(index, $index)"
                                >删除</el-button
                              >
                            </el-checkbox>
                          </el-checkbox-group>
                          <div v-if="item.name.indexOf('颜色') != -1">
                            <el-input
                              v-model="addVal"
                              width="100px"
                              class="input-color"
                            ></el-input>
                            <el-button @click="handleAddColor(index)"
                              >增加</el-button
                            >
                          </div>
                        </el-form-item>
                      </div>
                      <!-- table表 -->
                      <div class="module">
                        <el-table
                          :data="sku.tableData"
                          border
                          style="width: 100%"
                          :header-cell-style="headerCellStyle"
                        >
                          <el-table-column
                            v-for="(item, index) in sku.column"
                            :key="index"
                            :prop="item.propName"
                            :label="item.label"
                            width="130"
                            align="center"
                          ></el-table-column>
                          <!-- <el-table-column prop="name" label="颜色" width="120" align="center"></el-table-column> -->
                          <el-table-column
                            label="销售价格 (元)"
                            width="180"
                            align="center"
                          >
                            <template scope="scope">
                              <el-input
                                @blur="initRowInfo(scope.$index, 'data')"
                                v-model.trim="scope.row.price"
                              ></el-input>
                            </template>
                          </el-table-column>
                          <el-table-column
                            label="商品库存"
                            width="180"
                            align="center"
                          >
                            <template scope="scope">
                              <el-input
                                @blur="initRowInfo(scope.$index, 'data')"
                                v-model.number="scope.row.repertory"
                              ></el-input>
                            </template>
                          </el-table-column>
                          <el-table-column
                            label="库存预警值"
                            width="180"
                            align="center"
                          >
                            <template scope="scope">
                              <el-input
                                @blur="initRowInfo(scope.$index, 'data')"
                                v-model.number="scope.row.warning"
                              ></el-input>
                            </template>
                          </el-table-column>
                          <el-table-column
                            label="SKU编号"
                            align="center"
                            width="180"
                          >
                            <template scope="scope">
                              <el-input
                                @blur="initRowInfo(scope.$index, 'data')"
                                v-model="scope.row.encode"
                              ></el-input>
                            </template>
                          </el-table-column>
                          <el-table-column label="操作" align="center">
                            <template scope="scope">
                              <el-button
                                type="text"
                                size="small"
                                @click="
                                  handleDelRow(scope.$index, scope.row.id)
                                "
                                >删除</el-button
                              >
                              <el-button
                                type="text"
                                @click="initRowInfo(scope.$index, 'image')"
                                size="small"
                                >上传图片</el-button
                              >
                            </template>
                          </el-table-column>
                        </el-table>
                        <el-footer
                          v-show="sku.page.total > 10"
                          class="footer-style"
                        >
                          <!-- 分页 -->
                          <div class="pagination">
                            <div class="block">
                              <el-pagination
                                @current-change="specPageChange"
                                layout="prev, pager, next"
                                :current-page="sku.page.pageNum"
                                :page-size="sku.page.pageSize"
                                :pager-count="11"
                                :total="sku.page.total"
                              ></el-pagination>
                            </div>
                          </div>
                        </el-footer>
                      </div>
                    </div>
                  </el-main>
                </el-container>
              </div>
              <!-- 商品参数 -->
              <div class="module-row">
                <div class="module-row-left">
                  <div class="classify-icon">
                    <i class="el-icon-collection-tag"></i> 商品参数
                  </div>
                </div>
                <el-container>
                  <el-main>
                    <div class="addGoods-mokuai">
                      <!-- 参数列表 -->
                      <div class="module">
                        <el-row type="flex" class="row-bg">
                          <el-col :span="4">
                            <div
                              class="grid-content bg-purple bg-color row-height"
                              style="font-weight: bold;color: #909399;"
                            >
                              参数类型
                            </div>
                          </el-col>
                          <el-col :span="20">
                            <div
                              class="grid-content bg-purple bg-color row-height"
                              style="font-weight: bold;color: #909399;"
                            >
                              参数值
                            </div>
                          </el-col>
                        </el-row>
                        <el-row
                          v-for="(item, index) in temp.param"
                          :key="index"
                          type="flex"
                          class="row-bg"
                        >
                          <el-col :span="4">
                            <div class="grid-content bg-purple row-height">
                              {{ item.name }}
                            </div>
                          </el-col>
                          <el-col :span="20">
                            <div class="grid-content bg-purple row-height">
                              <el-date-picker
                                value-format="yyyy年MM月dd日"
                                format="yyyy年MM月dd日"
                                v-if="item.type == 'date'"
                                v-model="item.value"
                                align="right"
                                @blur="updateSpu('para')"
                                type="date"
                                placeholder="选择日期"
                                class="select-width-3"
                                :picker-options="pickerOptions"
                              ></el-date-picker>
                              <el-input
                                v-if="item.type == 'text'"
                                @blur="updateSpu('para')"
                                v-model="item.value"
                                placeholder
                                class="select-width-3"
                                size="small"
                              ></el-input>
                            </div>
                          </el-col>
                        </el-row>
                      </div>
                    </div>
                  </el-main>
                </el-container>
              </div>
              <!-- 商品相册 -->
              <div class="module-row">
                <div class="module-row-left">
                  <div class="classify-icon">
                    <i class="el-icon-collection-tag"></i> 商品相册
                  </div>
                </div>
                <el-container>
                  <el-main>
                    <div class="addGoods-mokuai">
                      <!-- 图片 -->
                      <div class="module-background">
                        <div
                          class="padding-simple"
                          v-if="spu.images.length > 0"
                        >
                          <!-- 一张图片 -->
                          <div
                            v-for="(item, index) in spu.images"
                            :key="index"
                            class="img-div"
                          >
                            <div class="demo-image img-div-inner">
                              <el-image
                                class="img-div-inner-img"
                                :src="item.url"
                                :fit="image.fit"
                              ></el-image>
                            </div>
                            <div class="img-div-button">
                              <el-button
                                type="text"
                                @click="
                                  item.url == spu.image.url
                                    ? null
                                    : handleAlbum(item, 'set')
                                "
                                :class="{
                                  'color-red': item.url == spu.image.url
                                }"
                                >{{
                                  item.url == spu.image.url ? "商品" : "设置"
                                }}主图</el-button
                              >
                              <el-button
                                @click="handleAlbum(item, 'del')"
                                type="text"
                                >删除图片</el-button
                              >
                            </div>
                          </div>
                        </div>
                        <div class="goodsMessage-button">
                          <el-button type="primary" @click="resetImgDialog"
                            >上传图片</el-button
                          >
                          <el-button
                            type="primary"
                            @click="
                              (imageStorage.dialog = true),
                                (imageStorage.target = 1)
                            "
                            >从图片库选择</el-button
                          >
                          <!-- <span class="font-size11">按住ctrl可同时批量选择多张图片上传，最多可以上传5张图片，建议尺寸800*800px</span> -->
                        </div>
                      </div>
                    </div>
                  </el-main>
                </el-container>
              </div>
              <!-- 商品详情 -->
              <div class="module-row">
                <div class="module-row-left">
                  <div class="classify-icon">
                    <i class="el-icon-collection-tag"></i> 商品详情
                  </div>
                </div>
                <el-container>
                  <el-main>
                    <div class="addGoods-mokuai">
                      <!-- 文本域 -->
                      <div class="goodsMessage-marginTop">
                        <div>
                          <!-- <el-radio-group v-model="dialogRadio">
                            <el-radio-button label="1">从图片库选择</el-radio-button>
                            <el-radio-button label="2">移动端上传说明</el-radio-button>
                          </el-radio-group>-->
                          <el-button
                            type="primary"
                            @click="
                              imageStorage.dialog = true;
                              imageStorage.target = 3;
                            "
                            icon="el-icon-upload"
                            >从图片库选择</el-button
                          >
                          <el-button type="text" @click="illustrate = true"
                            >移动端上传说明</el-button
                          >
                        </div>
                        <editor-bar
                          v-model="editor.detail"
                          :url="editor.url"
                          :isClear="editor.isClear"
                          @change="editorChange"
                        ></editor-bar>
                      </div>
                    </div>
                  </el-main>
                </el-container>
              </div>
            </el-form>
          </div>
          <div class="module-row">
            <div class="module-row-left"></div>
            <el-container>
              <el-main>
                <div class="el-main-footer">
                  <el-button @click="last" v-show="active != 1"
                    >上一步,{{ titleLast }}</el-button
                  >
                  <el-button type="primary" @click="next" v-show="active != 3"
                    >下一步，{{ titleNext }}</el-button
                  >
                  <el-button type="primary" @click="next" v-show="active == 3"
                    >提交审核</el-button
                  >
                </div>
              </el-main>
            </el-container>
          </div>
        </div>
      </el-main>
    </el-container>
    <!-- 对话框 上传图片 -->
    <el-dialog
      title="上传图片"
      :visible.sync="image.dialog"
      width="50%"
      :before-close="handleClose"
    >
      <el-form :inline="true" :model="image.data" class="demo-form-inline">
        <el-form-item label="商品名称:" label-width="100px">
          <el-input
            placeholder
            v-model="image.data.name"
            :disabled="image.target == 2"
          ></el-input>
        </el-form-item>
        <el-form-item label="商品类型名称:" label-width="100px">
          <el-input placeholder v-model="temp.name" :disabled="true"></el-input>
        </el-form-item>
        <br />
        <el-form-item
          v-show="image.target == 1"
          v-for="(item, index) in sku.column"
          :key="index"
          :label="item.label + ':'"
          label-width="100px"
        >
          <!-- :prop="item.propName" -->
          <!-- <template scope="scope"> -->
          <!-- <el-input v-model="scope.row.encode"></el-input> -->
          <el-input
            placeholder
            v-model="sku.data[item.propName]"
            :disabled="true"
          ></el-input>
          <!-- </template> -->
        </el-form-item>
        <br />
        <el-form-item label="属性图片:" label-width="100px">
          <el-upload
            ref="imgUpload"
            class="upload-demo float-left margin-left-10"
            :action="image.upload.url"
            :http-request="uploadFile"
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :file-list="image.data.fileList"
            :auto-upload="false"
            list-type="picture"
          >
            <el-button slot="trigger" size="small" type="primary">
              <div style="position:absolute;font-size: 18px;top: 11px;">
                <i class="el-icon-upload"></i>
              </div>
              <div style="margin-left:21px;">选择上传文件</div>
            </el-button>
            <el-button
              @click="
                imageStorage.dialog = true;
                imageStorage.target = 2;
              "
              size="small"
              type="primary"
              style="margin-left:15px;"
            >
              <div style="position:absolute;font-size: 18px;top: 11px;">
                <i class="el-icon-upload"></i>
              </div>
              <div style="margin-left:21px;">图库选择</div>
            </el-button>
            <div slot="tip" class="el-upload__tip">
              只能上传jpg/png文件，且不超过500kb
            </div>
          </el-upload>
          <!--  -->
          <!-- <el-upload
          class="upload-demo float-left margin-left-10"
          action="https://jsonplaceholder.typicode.com/posts/"
          :on-preview="handlePreview1"
          :on-remove="handleRemove1"
          :file-list="imgData.fileList1"
          list-type="picture"
        >
          <el-button size="small" type="primary">选择上传文件</el-button>
          <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
          </el-upload>-->
        </el-form-item>
        <br />
        <el-form-item
          label="商品默认选择:"
          label-width="100px"
          v-show="image.target == 1"
        >
          <el-radio-group @change="handleImgRadio" v-model="image.radio">
            <el-radio label="1">是</el-radio>
            <el-radio label="2">否</el-radio>
          </el-radio-group>
          <!-- <el-radio v-model="image.radio" label="1">是</el-radio>
          <el-radio v-model="image.radio" label="2">否</el-radio>-->
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="image.dialog = false">取 消</el-button>
        <el-button type="primary" @click="handleSave">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 对话框 图片库 -->
    <el-dialog
      title="从图库选择"
      :visible.sync="imageStorage.dialog"
      width="50%"
      :before-close="handleClose"
    >
      <div>
        <div class="float-left">全部图片</div>
        <div class="float-right">
          <el-select
            v-model="imageStorage.selected"
            placeholder="请选择"
            size="small"
          >
            <el-option
              v-for="item in imageStorage.albumList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </div>
      </div>
      <!-- 图片列表 -->
      <div class="checkbox-module">
        <el-checkbox-group v-model="imageStorage.checkList">
          <el-checkbox
            :label="item"
            v-for="(item, index) in imageStorage.imageList"
            :key="index"
          >
            <!-- 一张图片 -->
            <div class="demo-image">
              <el-image
                style="width:80px; height:80px"
                :src="item.toString()"
                :fit="image.fit"
              ></el-image>
            </div>
          </el-checkbox>
        </el-checkbox-group>
      </div>
      <!-- 分页 -->
      <div class="goodMessage-page">
        <div class="block">
          <el-pagination
            layout="prev, pager, next"
            @current-change="imagePageChange"
            :hide-on-single-page="true"
            :current-page="imageStorage.page.pageNum"
            :page-size="imageStorage.page.pageSize"
            :pager-count="11"
            :total="imageStorage.page.total"
          ></el-pagination>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button
          @click="
            imageStorage.dialog = false;
            imageStorage.checkList = [];
          "
          >取 消</el-button
        >
        <el-button type="primary" @click="handleImgStorage">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 对话框 上传说明 -->
    <el-dialog
      title="上传说明"
      :visible.sync="illustrate"
      width="50%"
      :before-close="handleClose"
    >
      <span>
        <h4>一、基本要求</h4>
        <p>
          1、手机详情总体大小：图片+文字，图片不超过20张，文字不超过5000字；建议：所有图片都是本宝贝相关的图片。
        </p>

        <h4>二、图片大小</h4>

        <p>1、建议使用宽度480 ~ 620像素、高度小于等于960像素的图片；</p>
        <p>
          2、格式为：JPG\JEPG\GIF\PNG；
          举例：可以上传一张宽度为480，高度为960像素，格式为JPG的图片。
        </p>
        <h4>三、文字要求</h4>
        <p>1、每次插入文字不能超过500个字，标点、特殊字符按照一个字计算；</p>
        <p>2、请手动输入文字，不要复制粘贴网页上的文字，防止出现乱码；</p>
        <p>3、以下特殊字符“>”、“"”、“'”、“\”会被替换为空。</p>
      </span>

      <span slot="footer" class="dialog-footer">
        <el-button @click="illustrate = false">取 消</el-button>
        <el-button type="primary" @click="illustrate = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import EditorBar from "@/components/wangEnduit";
import request from "@/utils/request";
import classifyApi from "@/api/goods/classify";
import brandApi from "@/api/goods/brand";
import templateApi from "@/api/goods/template";
import specApi from "@/api/goods/spec";
import paraApi from "@/api/goods/para";
import skuApi from "@/api/goods/sku";
import spuApi from "@/api/goods/spu";
import freightApi from "@/api/settings/freight";
// 文件引入（注意：由于是函数，故名字要和函数的名字一致）
// import { dateFormat } from 'vux' 使用失败 原因
import moment from "moment";
import axios from "axios";

export default {
  data() {
    var validateEncode = (rule, value, callback) => {
      // if (!value) {
      //   return callback(new Error("不能为空"));
      // }
      setTimeout(() => {
        if (value == "" || value == undefined) {
          // dateFormat(d,"YYYY-MM-DD HH:mm:ss");
          // var date =  moment(new Date()).format("yyyyMMDDHHmmssSSS");
          // Y 年 M 月 d 天 H 时 m 分 s 秒 S 毫秒  注： y 无效
          this.spu.encode =
            "No." + moment(new Date()).format("YYYYMMDDHHmmssSSS");
        } else {
          var regx = /No\./;
          if (!regx.test(value)) {
            this.spu.encode = "No." + value;
          }
        }
        // 验证后一定得调用callback()回调函数
        callback();
      }, 1000);
    };
    return {
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        }
      },
      active: 1,
      titleNext: "填写商品信息",
      titleLast: "",
      // 分类选择
      options: [],
      cardOptions: [],
      // 品牌列表
      brands: [],
      // 运费模板列表
      freights: [],
      // 规格参数模板
      temp: {
        id: null,
        name: "",
        spec: [],
        param: []
      },
      //  商品spu
      spu: {
        id: 8,
        name: "",
        subhead: "",
        category: [],
        brand: null,
        freight: null,
        desc: "",
        encode: "",
        serve: [],
        image: {},
        images: []
      },
      // 商品sku
      sku: {
        // 表格行对象
        data: {
          name: "",
          price: "",
          repertory: "",
          warning: "",
          encode: "",
          image: {
            url: "",
            name: ""
          },
          images: []
        },
        column: [],
        tableData: [],
        specArr: [],
        page: {
          pageNum: 1,
          pageSize: 10,
          total: 11
        }
      },
      // 表单
      form: {
        spuRules: {
          category: [{ required: true }],
          name: [
            { required: true, message: "请输入商品名称", trigger: "blur" }
          ],
          subhead: [
            { required: true, message: "请输入商品副标题", trigger: "blur" }
          ],
          brand: [
            { required: true, message: "请选择商品品牌", trigger: "change" }
          ],
          desc: [
            { required: true, message: "请输入商品简介", trigger: "blur" }
          ],
          freight: [
            { required: true, message: "请选择运费模板", trigger: "change" }
          ],
          encode: [
            { required: true, validator: validateEncode, trigger: "blur" }
          ]
        },
        skuRules: {
          goodsSpec: [{ required: true }]
          // repertory: [
          //   { required: true, message: "请输入商品名称", trigger: "blur" }
          // ],
        }
      },
      // 颜色添加
      addVal: "",
      // 富文本编辑器
      editor: {
        isClear: false,
        detail: "",
        url: request.defaults.baseURL + "/api-goods/spu/uploadImage/editor"
      },
      // 对话框 图片上传
      image: {
        // 图片 渲染方式 组
        // fits: ["fill"],
        // 图片渲染方式
        fit: "cover",
        // 对话框 上传图片
        dialog: false,
        // 是否为主图
        radio: "2",
        // 缓存图片对象
        temp: {},
        remove: [],
        // 图片操作类型 1 SKU 2 SPU
        target: null,
        upload: {
          url: "",
          fileData: {},
          fileList: []
        },
        data: {
          name: "",
          fileList: []
        }
      },

      // 对话框 对象
      dialogRadio: "1",

      // 对话框 图片库
      imageStorage: {
        page: {
          pageNum: 1,
          pageSize: 10,
          total: null
        },
        dialog: false,
        // 数据填充对象
        target: null,
        selected: null,
        imageList: [],
        albumList: [],
        //  选中的图片
        checkList: []
      },

      // 对话框 上传说明
      illustrate: false
    };
  },
  components: { EditorBar },
  methods: {
    // 初始化商品分类card
    initData() {
      classifyApi.getCategoryList().then(response => {
        this.options = response.data.data;
        let card = {
          selected: null,
          name: null,
          option: this.options
        };
        // this.card.option = this.options;
        this.cardOptions.splice(this.cardOptions.length, 0, card);
      });
      brandApi.listAll().then(response => {
        this.brands = response.data.data;
      });
      freightApi.listAll().then(response => {
        this.freights = response.data.data;
      });
    },
    initTempSpec() {
      specApi.findByTemplateId(this.temp.id).then(response => {
        var spe = response.data.data;
        spe.forEach((item, index) => {
          // 规格数组
          var spec = {
            id: item.id,
            name: item.name,
            option: [],
            options: item.options.split(";")
          };
          this.temp.spec.splice(this.temp.spec.length, 0, spec);
          // 规格表 规格属性
          var head = {
            label: item.name,
            propName: "spec_" + index
          };
          this.sku.column.splice(index, this.sku.column.length - index, head);
        });
      });
    },
    // 更新规格选项
    updateSpecById(value) {
      var options;
      this.temp.spec[value].options.forEach((item, index) => {
        if (index == 0) {
          options = item;
        } else {
          options += ";" + item;
        }
      });
      var spec = {
        id: this.temp.spec[value].id,
        options
      };
      specApi.updateById(spec);
    },
    // 初始化Sku规格表
    initSkuSpecTable() {
      skuApi
        .pageList(this.sku.page.pageNum, this.sku.page.pageSize, this.spu.id)
        .then(response => {
          this.sku.page.total = response.data.data.total;
          response.data.data.list.forEach((item, index) => {
            var price = Number(item.price).toFixed(2);
            var unit = {
              id: item.id,
              encode: item.encode,
              name: item.name,
              price: isNaN(price) ? null : price,
              repertory: item.repertory,
              warning: item.warning,
              spuId: item.spuId,
              image: {},
              images: []
            };
            if (item.image) {
              unit.image = JSON.parse(item.image);
            }
            if (item.images) {
              unit.images = JSON.parse(item.images);
            }
            var specs = JSON.parse(item.spec);
            specs.forEach($item => {
              // var specItem = $item.split(":");
              // 动态添加对象属性
              // this.$set(this.sku.data, specItem[0], specItem[1]);
              // 将数据转成JSON数据 由于data数据是动态绑定 不进行转换将导致数据全部一致
              // var json = JSON.stringify(target);
              // 将JSON数据转为对象  并添加到对象数据表中
              this.$set(unit, $item.prop, $item.value);
            });
            this.sku.tableData.splice(
              index,
              this.sku.tableData.length - index,
              // JSON.parse(json)
              unit
            );
          });
        });
    },
    // 初始化参数列表
    initTempParam() {
      paraApi.findByTemplateId(this.temp.id).then(response => {
        response.data.data.forEach((item, index) => {
          var param = {
            name: item.name,
            type: item.name == "上市年份" ? "date" : "text",
            value: null
          };
          this.temp.param.splice(index, this.temp.param.length - index, param);
        });
      });
    },
    // 初始化模板信息
    initFormTemp() {
      templateApi.findById(this.temp.id).then(response => {
        this.temp.name = response.data.data.name;
      });
    },
    // 初始化 图库
    initImageStorage() {
      this.axios
        .get(request.defaults.baseURL + "/api-goods/album/findAll")
        .then(response => {
          response.data.msg.forEach((item, index) => {
            var storage = {
              value: item.id,
              label: item.title
            };
            this.imageStorage.albumList.splice(
              index,
              this.imageStorage.albumList.length - index,
              storage
            );
          });
        });
    },
    updateImgStorage() {
      var formData = new FormData();
      formData.append("id", this.imageStorage.selected);
      this.axios
        .post(request.defaults.baseURL + "/api-goods/album/findById", formData)
        .then(response => {
          this.imageStorage.imageList = response.data.msg.split(",");
        });
    },
    handleImgStorage() {
      this.imageStorage.dialog = false;
      if (this.imageStorage.checkList.length > 0) {
        this.imageStorage.checkList.forEach(item => {
          var img = {
            url: item
          };
          if (this.imageStorage.target == 1) {
            var hasImg = this.spu.images.some($item => $item.url == item);
            if (!hasImg) {
              this.spu.images.splice(this.spu.images.length, 0, img);
              this.updateSpu("images");
            }
          } else if (this.imageStorage.target == 2) {
            if (!this.image.data.fileList.some($item => $item.url == item)) {
              this.image.data.fileList.splice(
                this.image.data.fileList.length,
                0,
                img
              );
            }
          } else if (this.imageStorage.target == 3) {
            var html =
              '<p><img src="' + item + '" style="max-width:100%;"><br></p>';
            this.editor.detail += html;
          }
        });
      }
      this.imageStorage.checkList = [];
    },

    // 分类选择操作
    handleCategorySelected(level, event) {
      this.cardOptions[level].selected = event.currentTarget.id;
      this.cardOptions[level].option.forEach(item => {
        if (this.cardOptions[level].selected == item.categoryId) {
          this.cardOptions[level].name = item.categoryName;
          this.temp.id = item.categoryTemplateId;
        }
      });
      if (this.cardOptions[level].option.length > 0) {
        this.cardOptions[level].option.forEach(item => {
          if (item.categoryId == this.cardOptions[level].selected - 0) {
            let card = {
              selected: null,
              name: null,
              option: item.childList
            };
            // this.card.selected = null;
            // this.card.option = item.childList;
            if (card.option && card.option.length > 0) {
              if (this.cardOptions[level].option.length > level + 1) {
                this.cardOptions.splice(
                  level + 1,
                  this.cardOptions[level].option.length - level - 1,
                  card
                );
              } else {
                this.cardOptions.splice(level + 1, 0, card);
              }
            } else {
              this.cardOptions.splice(
                level + 1,
                this.cardOptions[level].option.length - level - 1
              );
            }
          }
        });
      }
      // 商品spu分类ID数组
      this.spu.category.splice(
        level,
        this.spu.category.length - level,
        event.currentTarget.id
      );
    },
    // 编辑分类
    editCategory() {
      this.active = 1;
    },

    // 富文本操作
    editorChange() {},

    // SKU
    // 删除颜色
    deleteColor(index, item) {
      this.temp.spec[index].options.splice(item, 1);
      this.updateSpecById(index);
    },
    // 添加颜色
    handleAddColor(value) {
      if (this.addVal != "") {
        this.temp.spec[value].options.splice(
          this.temp.spec[value].options.length,
          0,
          this.addVal
        );
        this.addVal = "";
        this.updateSpecById(value);
      }
    },
    // 规格选择处理
    handleCheckedCitiesChange() {
      var total = [];
      this.temp.spec.forEach((item, index) => {
        if (item.option.length > 0) {
          // 排序数组并赋值
          total[index] = item.option.sort((a, b) => a.localeCompare(b));
        }
        // 动态 字符串 => 对象属性名字段 使用括号表示法
        // console.log("prop："+this.sku.data[ "spec_" + index ]);
      });
      if (total.length == this.temp.spec.length) {
        this.combination(total, 0, this.sku.data);
      }
      // console.log(value);
    },
    // 数组组合算法
    combination(arr, index, target) {
      for (let i = 0; i < arr[index].length; i++) {
        const element = arr[index][i];
        let specTemp = {
          label: this.sku.column[index].label,
          prop: "spec_" + index,
          value: element
        };
        this.sku.specArr.splice(
          index,
          this.sku.specArr.length - index,
          // "spec_" + index + ":" + element
          specTemp
        );
        if (index == arr.length - 1) {
          var formData = {
            spec: JSON.stringify(this.sku.specArr),
            spuId: this.spu.id
          };
          skuApi.add(formData).then(() => {
            this.initSkuSpecTable();
          });
        }
        if (index < arr.length - 1) {
          let tempIndex = index + 1;
          this.combination(arr, tempIndex, target);
        }
      }
    },
    // 规格table表 删除当前行
    handleDelRow(index, id) {
      skuApi.deleteById(id).then(() => {
        this.sku.tableData.splice(index, 1);
      });
    },
    // 规格table表 初始化行元素对象
    initRowInfo(index, value) {
      this.sku.data = this.sku.tableData[index];
      // 如果SKU名称为空 SKU名称就是SPU名称
      if (this.sku.data.name == "" || this.sku.data.name === undefined) {
        this.sku.data.name = this.spu.name;
      }
      if (value == "image") {
        this.image.target = 1;
        this.image.upload.fileData = new FormData();
        this.image.data.name = this.sku.data.name;
        this.image.upload.fileData.append("skuId", this.sku.data.id);
        // this.image.data.fileList = this.sku.data.images;
        this.image.data.fileList = [];
        this.sku.data.images.forEach((item, index) => {
          this.image.data.fileList.splice(
            index,
            this.image.data.fileList.length - index,
            item
          );
        });
        this.image.radio = "2";
        this.image.dialog = true;
      } else if (value == "data") {
        this.updateSku();
      }
    },
    updateSku() {
      this.sku.data.name = this.image.data.name;
      var unit = {
        id: this.sku.data.id,
        encode: this.sku.data.encode,
        name: this.sku.data.name,
        price: this.sku.data.price,
        repertory: this.sku.data.repertory,
        warning: this.sku.data.warning,
        spuId: this.sku.data.spuId,
        image: JSON.stringify(this.sku.data.image),
        images: JSON.stringify(this.sku.data.images)
      };
      skuApi.updateById(unit).then(() => {
        this.initSkuSpecTable();
      });
    },
    // 当前页更改后操作
    specPageChange(value) {
      this.sku.page.pageNum = value;
      this.initSkuSpecTable();
    },

    // 当前页更改后操作
    imagePageChange(value) {
      this.imageStorage.page.pageNum = value;
      this.updateImgStorage();
    },

    // SPU
    // 相册操作
    handleAlbum(image, type) {
      if (type == "set") {
        this.spu.image = image;
        this.updateSpu("image");
      } else if (type == "del") {
        if (this.spu.image.url == image.url) {
          this.spu.image = {};
        }
        this.spu.images.forEach((item, index) => {
          if (item.url == image.url) {
            this.spu.images.splice(index, 1);
          }
        });
        if (image.name) {
          spuApi.deleteImage(image.name, this.spu.id);
          // .then(() => {
          //   this.updateSpu();
          // });
        }
        this.updateSpu("images");
      }
    },
    updateSpu(target) {
      var unit;
      if (target.constructor == String) {
        unit = {
          id: this.spu.id
        };
        if (target == "para") {
          this.$set(unit, target, JSON.stringify(this.temp.param));
        } else if (target == "description") {
          this.$set(unit, target, this.editor.detail);
        } else {
          this.$set(unit, target, JSON.stringify(this.spu[target]));
        }
      } else if (target.constructor == Object) {
        unit = target;
      } else if (!target) {
        unit = {
          id: this.spu.id,
          encode: this.spu.encode,
          name: this.spu.name,
          caption: this.spu.subhead,
          brandId: this.spu.brand,
          categoryId: this.arrayToString(this.spu.category),
          templateId: this.temp.id,
          freightId: this.spu.freight,
          service: this.arrayToString(this.spu.serve),
          introduction: this.spu.desc,
          para: JSON.stringify(this.temp.param),
          image: JSON.stringify(this.spu.image),
          images: JSON.stringify(this.spu.images)
        };
      }
      spuApi.updateById(unit).then(() => {});
    },
    initAlbum() {
      spuApi.getOne(this.spu.id).then(response => {
        this.spu = response.data.data;
        // if (response.data.data.para) {
        //   this.temp.param = JSON.parse(response.data.data.para)
        // }
        // if (response.data.data.image) {
        //   this.spu.image = JSON.parse(response.data.data.image)
        // }
        // if (response.data.data.images) {
        //   this.spu.images = JSON.parse(response.data.data.images)
        // }
        // this.$set(unit, specItem[0], specItem[1]);
      });
    },
    resetImgDialog() {
      this.image.target = 2;
      this.image.upload.fileData = new FormData();
      this.image.upload.fileData.append("spuId", this.spu.id);
      this.image.data.name = this.spu.name;
      // this.image.data.fileList = this.spu.images;
      this.image.data.fileList = [];
      this.spu.images.forEach((item, index) => {
        this.image.data.fileList.splice(
          index,
          this.image.data.fileList.length - index,
          item
        );
      });
      this.image.dialog = true;
    },

    // 对话框
    // 上传图片
    // 覆盖默认的上传行为，可以自定义上传的实现
    uploadFile(file) {
      this.image.upload.fileData.append("files", file.file);
    },
    // 删除图片
    handleRemove(file, fileList) {
      if (file.status == "success") {
        // var img = {
        //   url: file.url
        // };
        // if (file.name) {
        //   this.$set(img, "name", file.name);
        // }
        this.image.remove.splice(this.image.remove.length, 0, file);
      }
      this.image.data.fileList = fileList;
    },
    // 点击图片列表 单张图片
    handlePreview(file) {
      // 当前图片是否为主图
      // 如果是主图设置radio显示
      if (file.name != this.sku.data.image.name) {
        this.image.radio = "2";
      } else {
        this.image.radio = "1";
      }
      this.image.temp = file;
    },

    // 是否设置为主图
    handleImgRadio() {
      // 缓存图片对象
      if (this.image.temp) {
        // 设置主图
        if (this.image.radio == "1") {
          this.sku.data.image.name = this.image.temp.name;
        } else if (this.image.radio == "2") {
          // 取消主图
          this.sku.data.image = "";
        }
      }
    },
    // 上传图片保存操作
    async handleSave() {
      this.image.dialog = false;
      this.$refs.imgUpload.submit();
      await axios
        .post(this.image.upload.url, this.image.upload.fileData, {
          headers: { "Content-Type": "multipart/form-data" }
        })
        .then(response => {
          if (response.data.data) {
            response.data.data.forEach(item => {
              var img = {
                url: request.defaults.baseURL + "/api-goods" + item.url,
                name: item.name,
                size: item.size
              };
              this.image.data.fileList.splice(
                this.image.data.fileList.length,
                0,
                img
              );
              if (this.image.target == 1) {
                if (this.sku.data.image.name == item.name) {
                  this.sku.data.image = img;
                }
              } else if (this.image.target == 2) {
                if (this.spu.image.name == item.name) {
                  this.spu.image = img;
                }
              }
            });
          }
        })
        .catch(() => {
          console.log("Error：" + new Date());
        });
      if (this.image.target == 1) {
        if (this.image.data.fileList.length > 0) {
          this.image.data.fileList.forEach((item, index) => {
            var img = {
              url: item.url,
              name: item.name,
              size: item.size
            };
            this.sku.data.images.splice(
              index,
              this.sku.data.images.length - index,
              img
            );
          });
        } else {
          this.spu.images = [];
        }
        if (this.image.remove && this.image.remove.length > 0) {
          this.image.remove.forEach(item => {
            if (item.url == this.sku.data.image.url) {
              this.sku.data.image = {};
            }
            if (item.name) {
              skuApi.deleteImage(item, this.sku.data.id).then(() => {});
            }
          });
        }
        this.updateSku();
      } else if (this.image.target == 2) {
        if (this.image.data.fileList.length > 0) {
          this.image.data.fileList.forEach((item, index) => {
            var img = {
              url: item.url,
              name: item.name,
              size: item.size
            };
            this.spu.images.splice(index, this.spu.images.length - index, img);
          });
        } else {
          this.spu.images = [];
        }
        if (this.image.remove && this.image.remove.length > 0) {
          this.image.remove.forEach(item => {
            if (item.url == this.spu.image.url) {
              this.spu.image = {};
            }
            if (item.name) {
              spuApi.deleteImage(item, this.spu.id).then(() => {});
            }
          });
        }
        var unit = {
          id: this.spu.id,
          image: JSON.stringify(this.spu.image),
          images: JSON.stringify(this.spu.images)
        };
        this.updateSpu(unit);
        // spuApi.updateById(unit).then(() => {});
      }
    },

    //  操作
    // 下一步
    next() {
      if (this.active == 1) {
        // 商品分类
        if (this.cardOptions[0].selected == null) {
          this.$message({
            message: "请选择一个分类！",
            type: "warning",
            center: true
          });
        } else {
          this.active = 2;
          this.initFormTemp();
          this.initTempSpec();
          this.initTempParam();
        }
      } else if (this.active == 2) {
        // 基本商品信息
        // 提交验证
        this.$refs["refForm"].validate(valid => {
          if (valid) {
            var formData = {
              encode: this.spu.encode,
              name: this.spu.name,
              caption: this.spu.subhead,
              brandId: this.spu.brand,
              categoryId: this.arrayToString(this.spu.category),
              templateId: this.temp.id,
              freightId: this.spu.freight,
              service: this.arrayToString(this.spu.serve),
              introduction: this.spu.desc
            };
            spuApi.add(formData).then(response => {
              this.spu.id = response.data.data;
              if (this.spu.id) {
                this.active = 3;
                this.initSkuSpecTable();
                this.initImageStorage();
              }
            });
          } else {
            this.$message({
              message: "商品信息格式不正确或缺失！",
              type: "warning",
              center: true
            });
            return false;
          }
        });
      } else if (this.active == 3) {
        this.updateSpu("description");
        // 初始化分类选择
        classifyApi.getCategoryList().then(response => {
          this.options = response.data.data;
          let card = {
            selected: null,
            name: null,
            option: this.options
          };
          // this.card.option = this.options;
          this.cardOptions.splice(0, this.cardOptions.length, card)
        });
        this.$message({
          message: "商品信息已提交，待审核中.....",
          type: "success",
          center: true
        });
        this.active = 1;
      }
    },
    // 上一步
    last() {
      this.active--;
    },

    // 对话框 关闭确认弹窗
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then(() => {
          done();
        })
        .catch(() => {});
    },
    headerCellStyle() {
      return "background-color: #f9fafc;";
    },
    arrayToString(arr) {
      var arrStr = "";
      arr.forEach((item, index) => {
        if (index == 0) {
          arrStr = item;
        } else {
          arrStr += ";" + item;
        }
      });
      return arrStr;
    }
  },
  //监听器：
  watch: {
    active: function(newValue) {
      if (newValue == 1) {
        this.titleNext = "填写商品信息";
      }
      if (newValue == 2) {
        this.titleNext = "填写商品属性";
        this.titleLast = "选择商品分类";
      }
      if (newValue == 3) {
        this.titleLast = "填写商品信息";
      }
    },
    "image.target": function(value) {
      if (value == 1) {
        this.image.upload.url =
          request.defaults.baseURL + "/api-goods/sku/uploadImage";
      } else if (value == 2) {
        this.image.upload.url =
          request.defaults.baseURL + "/api-goods/spu/uploadImage";
      }
    },
    "imageStorage.selected": function() {
      this.updateImgStorage();
    }
  },
  created() {
    this.initData();
  }
};
</script>
<style scoped>
/* 图片选中 */
.checkbox-module {
  padding: 20px 0 20px 10px;
  margin: auto;
  margin-top: 50px;
}

.goodMessage-page {
  float: right;
}
/*  */
.float-left {
  float: left;
}
.float-right {
  float: right;
}
.color-red {
  color: #f04844;
}
.margin-left-10 {
  margin-left: 10px;
}
.padding-simple {
  padding: 20px;
}
.img-div {
  margin-top: 10px;
  width: 170px;
  display: inline-block;
  border: 1px solid #e4e4e4;
  border-radius: 5px;
}
.img-div-inner {
  padding: 15px;
}
.img-div-inner-img {
  width: 140px;
  height: 140px;
  border-radius: 2px;
}
.img-div-button {
  width: 170px;
  border-top: 1px solid #e4e4e4;
  height: 40px;
  background-color: rgb(240, 240, 240);
  text-align: center;
}
.goodsMessage-button {
  margin-top: 8px;
  padding-left: 70px;
}
.marginleft-button {
  margin-left: 10px;
}
/*第二模块  */
/* .addGoods-mokuai2 {
  padding-top: 30px;
  padding-left: 20px;
  background-color: #fff;
} */
.addgoods-input-width {
  width: 500px;
}
.addgoods-input-width textarea {
  overflow-y: visible;
}
/*  */
.goodsMessage-marginTop {
  margin-top: 20px;
}
.select-width-3 {
  width: 300px;
}
.el-main-footer {
  width: 96%;
  border-top: 1px solid #f1f1f1;
  /* position: absolute; */
  text-align: center;
  padding-top: 12px;
  margin-left: 2%;
  margin-bottom: 30px;
}
/*  模块 */
.addGoods-mokuai {
  padding-top: 20px;
  padding-left: 20px;
}
.module {
  /* width: 100%; */
  margin-top: 30px;
}
.module-background {
  /* 需要注意的是，运算符前后都需要保留一个空格，例如：width: calc(100% - 10px)； */
  width: calc(100% - 42px);
  padding: 20px;
  background-color: #f9fafc;
  border: 1px solid #e4e4e4;
}
.module-row {
  width: calc(100% - 202px);
  min-height: 100%;
  padding-left: 180px;
  padding-right: 20px;
  background-color: #fff;
  position: relative;
}
.module-row-left {
  z-index: 1;
  width: 180px;
  /* min-height: calc(100% - 20px); */
  border-right: 1px solid #e4e4e4;
  background-color: #fcfcfc;
  position: absolute;
  bottom: 0px;
  left: 0px;
  top: 0px;
}
.addGoods-div-01 {
  border: 1px solid #e4e4e4;
  margin-bottom: 20px;
  background-color: #fff;
}
.addGoods-div-02 {
  z-index: 1;
  width: 180px;
  border-right: 1px solid #e4e4e4;
  background-color: #fcfcfc;
  bottom: 0px;
  left: 0px;
  top: 0px;
  position: absolute;
}
/* 级联模块 */
.cascader-div {
  margin-top: 20px;
  margin-bottom: 50px;
  height: 400px;
  float: left;
}
/* 级联模块 左边箭头 */
.cascader-div-left {
  vertical-align: middle;
  margin: 0 10px;
  display: inline-block;
}
/* 级联模块 card */
.box-card {
  vertical-align: middle;
  width: 280px;
  height: 394px;
  display: inline-block;
  color: #999999;
}
.cascader-div .box-card .card-item {
  font-size: 14px;
  width: 280px;
  line-height: 41px;
  height: 41px;
  text-align: left;
}
.card-item-border {
  border-bottom: 1px solid #e4e4e4;
}
.card-item a {
  height: 41px;
  color: #999999;
}
.card-item .active {
  background-color: rgba(242, 242, 242, 1);
  color: #0099ff;
}
.card-item .a-div {
  padding-left: 20px;
  width: 225px;
  display: inline-block;
}
/* .item-content:after {
  content: "\e6e0";
} */

.clearfix:before,
.clearfix:after {
  display: inline-table;
  content: "";
}
.clearfix:after {
  clear: both;
}
.input-color {
  width: 150px;
}
.el-checkbox {
  margin-right: 10px;
}
.box-card-list {
  overflow-y: auto;
  overflow-x: hidden;
  height: 335px;
}
.classify-icon {
  background: url("./../../../assets/images/u2198.png") no-repeat;
  width: 200px;
  height: 50px;
  line-height: 50px;
  color: #fff;
  padding-left: 40px;
  position: absolute;
  top: 60px;
  right: -60px;
}
.footer-style {
  background-color: #fdfdfe;
  height: 60px;
  line-height: 60px;
  border: 1px solid #ebeef5;
  border-top: 0;
  position: relative;
}
.footer-style .pagination {
  position: absolute;
  right: 10px;
  display: inline-block;
  top: 15px;
}
</style>
<style>
.box-card .el-card__body {
  padding: 0;
}
.module-row .scrollbar-wrap {
  /* overflow-y: auto;*/
  overflow-x: hidden;
}
.module-row .el-scrollbar {
  height: 100%;
}
.module-row .el-col {
  height: 47px !important;
}
.module-row .row-height {
  height: 46px;
  line-height: 46px !important;
}
.checkbox-module .el-checkbox__input {
  position: absolute !important;
  right: 5px;
  top: 5px;
  z-index: 1;
}
.checkbox-module .el-checkbox__label {
  padding-bottom: 10px;
}
</style>
